<script setup lang="ts">
import { onMounted, ref } from 'vue'

let props = defineProps({
  // 进度条进度
  percentage: {
    type: Number,
    default: 0
  },
  // 进度条是否有动画效果
  isAnimation: {
    type: Boolean,
    default: false
  },
  // 进度条动画时间
  time: {
    type: Number,
    default: 3000
  }
})

// 分发加载完成事件
let emits = defineEmits(['complete'])

let p = ref(0)

onMounted(() => {
  if (props.isAnimation) {
    // 规定时间内加载完成
    // 计算每一秒中需要加载多少
    let t = Math.ceil(props.time / props.percentage)
    // 将每一秒放入定时器
    let timer = setInterval(() => {
      p.value += 1
      if (p.value >= props.percentage) {
        p.value = props.percentage
        clearInterval(timer)
      }
    }, t)
  } else {
    p.value = props.percentage
    console.log(p.value, 2)
  }

  if (props.percentage >= 100) {
    emits('complete')
  }
})
</script>

<template>
  <div>
    <el-progress :percentage="p" v-bind="$attrs"></el-progress>
  </div>
</template>

<style lang="scss" scoped></style>
